import {
    LockOutlined, UserOutlined,
} from '@ant-design/icons';
import {
    LoginFormPage, ModalForm, ProForm,
    ProConfigProvider,
    ProFormText,
} from '@ant-design/pro-components';
import {Button, Tabs, message, theme} from 'antd';
import backgroundVideo from '../../assets/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr.mp4'
import {request} from "../../utils/Http";
import {setLoginObj, setToken} from "../../utils/LocaStorage";
import {useNavigate} from "react-router-dom";
import {waitTime} from "../../utils/Const";

const LoginPage = () => {
    const navigate = useNavigate();
    const {token} = theme.useToken();

    return (
        <div
            style={{
                backgroundColor: 'white',
                height: '100vh',
            }}
        >
            <LoginFormPage
                backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
                logo=""
                // backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
                backgroundVideoUrl={backgroundVideo}
                title="IOT"
                onFinish={async (values) => {
                    // 发起网络请求
                    await request.post({url: "login", params: values}).then(res => {
                        // 这里是成功回调
                        setToken(res.data.token);
                        setLoginObj(JSON.stringify(res.data.userInfo));
                        navigate('/')
                    }).catch(err => {
                        // 这里是错误回调
                        console.log(err)
                    })
                }}
                containerStyle={{
                    backgroundColor: 'rgba(104,22,22,0.65)',
                    backdropFilter: 'blur(4px)',
                }}
                subTitle="IOT"
            >
                <Tabs
                    centered
                >
                    <Tabs.TabPane tab={'账号密码登录'} titleFontSize={token.fontSize = 18}/>
                </Tabs>
                {/* 登录框*/}
                <>
                    <ProFormText
                        name="account"
                        fieldProps={{
                            size: 'large',
                            prefix: (
                                <UserOutlined
                                    style={{
                                        color: token.colorText,
                                    }}
                                    className={'prefixIcon'}
                                />
                            ),
                        }}
                        placeholder={'用户名'}
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    />
                    <ProFormText.Password
                        name="password"
                        fieldProps={{
                            size: 'large',
                            prefix: (
                                <LockOutlined
                                    style={{
                                        color: token.colorText,
                                    }}
                                    className={'prefixIcon'}
                                />
                            ),
                        }}
                        placeholder={'密    码'}
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]}
                    />
                </>
                <UserModalForm/>
            </LoginFormPage>
        </div>
    );
};

/**
 * 对话框
 * @returns {JSX.Element}
 * @constructor
 */
const UserModalForm = (props) => {
    return (<ModalForm
        trigger={<Button type="link" style={{
            float: 'right',
            fontSize:14,
            marginBottom:24
        }}>
            没有账号，去注册?
        </Button>}
        autoFocusFirstInput
        modalProps={{
            onCancel: () => console.log('run'),
        }}
        submitTimeout={1000}
        width={450}
        onFinish={
            async (values) => {
                await waitTime(1000);
                // 获取数据,注意同步异步的问题
                request.post({
                    url: "sys-user/add-or-edit",
                    params: values,
                }).then(res => {
                    message.success("新增成功");
                }).catch(err => {
                    // 这里是错误回调
                    console.log(err)
                })
                return true;
            }
        }>
        <ProForm.Group>
            <ProFormText name="nickName" label="账号名称" placeholder="名称"
                         rules={[{required: true, message: '账号名称必填!'}]}/>
            <ProFormText name="account" label="登录账号" placeholder="账号"
                         rules={[{required: true, message: '账号必填!'}]}/>
            <ProFormText name="password" label="密码" placeholder="密码"
                         rules={[{required: true, message: '密码必填!'}]}/>
            <ProFormText name="contactTel" label="手机号" placeholder="手机号"/>
        </ProForm.Group>
    </ModalForm>);
};

export default () => {
    return (
        <ProConfigProvider dark>
            <LoginPage/>
        </ProConfigProvider>
    );
};